<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:s="http://sduept.security.el/func"
	template="/template/template_dialog.xhtml">
	<ui:define name="head">
		<title>输电线路#{request.getParameter('selectedFaultReason')}故障分析</title>
		<link rel="stylesheet"
			href="#{request.contextPath}/resources/plugins/datatables/dataTables.bootstrap.css" />
		<link rel="stylesheet"
			href="/resources/bootstrap/css/bootstrap-datetimepicker.min.css" />
		<style>
.wrap-condition .form-inline {
	float: left;
	margin: 0px 5px;
}

#startYear, #endYear {
	padding: 6px 2px;
}

.info-box-content {
	line-height: 90px;
	height: 90px;
	font-size: 20px;
}
</style>
	</ui:define>
	<ui:define name="content">
		<div class="box box-primary">
			<div class="box-body">
				<div class='wrap-condition'>
					<div class='form-inline'>
						<label>年份：</label> <input type="text" id="startYear"
							class='type form-control' /> 至 <input type="text" id="endYear"
							class='type form-control' />
					</div>
					<div class='form-inline'>
						<label>电压等级：</label> <select id="voltage"
							class='type form-control'>
							<option selected="selected" value="0">全部</option>
							<option value="500">500kV</option>
							<option value="220">220kV</option>
						</select>
					</div>
					<button class='btn btn-default' id='check-btn'>查询</button>
				</div>
			</div>
		</div>
		<div class="info-box bg-yellow">
			<span class="info-box-icon"> <i class="icon ion-pie-graph"></i>
			</span>
			<div class="info-box-content" id="total"></div>
		</div>
		<div class="box">
			<div class="col-md-12 col-sm-12 no-padding" id='yearCount'
				style='display: none'>
				<div class="box box-primary">
					<div class="box-header with-border">
						<h3 class="box-title">
							<span id='yearCountLineTitle'></span>
						</h3>
					</div>
					<div class="box-body">
						<div id="yearCountLine" style="height: 250px"></div>
					</div>
				</div>
			</div>
			<div class="col-md-12 col-sm-12 no-padding">
				<div class="box box-primary">
					<div class="box-header with-border">
						<h3 class="box-title">
							<span id='lineTitle'></span>
						</h3>
					</div>
					<div class="box-body">
						<div id="fault_line" style="height: 250px"></div>
					</div>
				</div>
			</div>
			<div class="col-md-12 col-sm-12 no-padding">
				<div class="box box-primary">
					<div class="box-header with-border">
						<h3 class="box-title">
							<span id='faultTypeTitle'></span>
						</h3>
						<div class="box-tools pull-right">
							<button type="button" class="btn btn-box-tool"
								onclick="getMaxChart('faultType_pie')">
								<i class="fa  fa-square-o"></i>
							</button>
						</div>
					</div>
					<div class="box-body">
						<div id="faultType_pie" style="height: 250px;"></div>
						<div id="faultTypeTbDiv" style="display: none">
							<table id="faultTypeTable"
								class="table table-bordered table-hover">
							</table>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-12 col-sm-12 no-padding">
				<div class="box box-primary">
					<div class="box-header with-border">
						<h3 class="box-title">
							<span id='barTitle'></span>
						</h3>
					</div>
					<div class="box-body">
						<div class="col-sm-7">
							<div id="fault_multi_bar" style="height: 250px;"></div>
						</div>
						<div class="col-sm-5">
							<div id="fault_pie" style="height: 250px;"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-12 col-sm-12 no-padding" id="companyYear">
				<div class="box box-primary">
					<div class="box-header with-border">
						<h3 class="box-title">
							<span id='companyYearTitle'></span>
						</h3>
					</div>
					<div class="box-body">
						<div id="companyYearLine" style="height: 250px;"></div>
					</div>
				</div>
			</div>
		</div>
		<h:inputHidden id="selectedFaultReason" value="#{request.getParameter('selectedFaultReason')}"></h:inputHidden>
	</ui:define>
	<ui:define name="contentend">
		<script src="#{request.contextPath}/resources/js/tables/mytable.js"></script>
		<script
			src="#{request.contextPath}/resources/plugins/datatables/jquery.dataTables.min.js"></script>
		<script
			src="#{request.contextPath}/resources/plugins/datatables/dataTables.bootstrap.min.js"></script>
		<script
			src="#{request.contextPath}/resources/bootstrap/js/bootstrap-datetimepicker.min.js"></script>
		<script src="#{request.contextPath}/resources/js/mycharts/charts.js"></script>
		<script
			src="#{request.contextPath}/resources/plugins/echarts/echarts.js"></script>
		<script src="#{request.contextPath}/resources/js/mycharts/pieChart.js"></script>
		<script
			src="#{request.contextPath}/resources/js/mycharts/categoryBarChart.js"></script>
		<script
			src="#{request.contextPath}/resources/js/mycharts/categoryLineChart.js"></script>
		<script src="#{request.contextPath}/resources/js/array-util.js"></script>
		<script src="faultEquipmentStatisticsEcharts.js"></script>
		<script src="transmissionLineDlg.js"></script>
		<script>
			function resizeHtml() {
				var t1 = window.setInterval(function() {
					var width = document.documentElement.clientWidth || document.body.clientWidth;
					if (width != 0) {
						$("#yearCountLine").css("width",width-20);
						$("#fault_line").css("width",width-20);
						$("#faultType_pie").css("width",width-20);
						$("#fault_multi_bar").css("width",width*7/12);
						$("#fault_pie").css("width",width*5/12-20);
						$("#companyYearLine").css("width",width-20);
						yearCountLineChart.getChart().resize();
						lineChart.getChart().resize();
						faultType_pie.getChart().resize();
						pieChart.getChart().resize();
						barChart.getChart().resize();
						companyYearLineChart.getChart().resize();
						window.clearInterval(t1);
					}
				}, 20);
			}
			function getMaxChart(chartId){
				var title=$("#"+chartId).closest(".box").find("span").first().html();
				var w = document.documentElement.clientWidth || document.body.clientWidth;
				var h = document.documentElement.clientHeight || document.body.clientHeight;
				$("#"+chartId).height(h*0.8-50);
				$("#"+chartId).width(w*0.8-50);
				var newLayer=layer.open({
					type : 1,
					shade : false,
					title : title, 
					content : $("#"+chartId),//捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
					area: [w*0.8+'px', h*0.8+'px'],
					scrollbar: false,
					cancel:function(){
						$("#"+chartId).height(250);
						$("#"+chartId).width(w);
						faultType_pie.getChart().resize();
						faultType_pie.getChart().on("click",function(params){
							   if(faultTypeTableShow &amp;&amp; selectedFaultType==params.name){
								   $("#faultTypeTbDiv").hide();
								   faultTypeTableShow = false;
							   }else{
								   selectedFaultType=params.name;
								   $("#faultTypeTbDiv").show();
								   faultTypeTableShow = true;
								   $.getJSON('/rest/transmissionline/getLineFaultDetail/'+startYear+'/'+endYear+'/'+type+"/"+voltage+"/"+selectedFaultType, function(result) {
									   initFaultTables(result);
									});
							   }
						  });
					}
				});
				//layer.full(newLayer);//弹出即全屏
				faultType_pie.getChart().resize();
				faultType_pie.getChart().off("click");
			}
		</script>
	</ui:define>
</ui:composition>